<template>
    <div class="mod-crm__crmexhiproject">
        <div style="font-size:16px;font-weight: 600;">
            <el-radio></el-radio>人员标签二
        </div>
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
            <!--新增 -->
            <el-form-item style="margin-top:15px" v-if="state.hasPermission('crm:crmlabel:save')">
                <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
            </el-form-item>
            <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                v-loading="state.dataListLoading" :data="state.dataList" border
                @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
                <el-table-column align="center" prop="id" label="标签ID" width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="label" label="标签名称" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="sort" label="排序" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" :label="$t('user.status')" sortable="custom" header-align="center"
                    align="center" width="120" show-overflow-tooltip>
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.delFlag === 1" size="small" type="danger">{{
                            $t("隐藏") }}</el-tag>
                        <el-tag v-else size="small" type="success">{{ $t("显示") }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="creator" label="创建人" width="200"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="250">
                    <template v-slot="scope">
                        <el-button v-if="state.hasPermission('crm:crmlabel:update')" link type="primary"
                            @click="addOrUpdateHandle(scope.row.id)">{{ $t("编辑") }}</el-button>
                        <el-button v-if="state.hasPermission('crm:crmlabel:delete')" link type="danger"
                            @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
            :total="state.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
    </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./personnel-label2-add-update.vue";
const view = reactive({
    getDataListURL: '/crm/crmlabel/page',
    getDataListIsPage: true,
    deleteURL: "crm/crmlabel",
    deleteIsBatch: true,
    dataForm: {
        id: "",
        label: "",
    }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (label_id?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(label_id);
    });
};

//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};
</script>
